<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D数字时钟</title>
    <style>
        html,
        body {
            background-color: #000;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .g-number-container {
            position: relative;
            margin-top: 10vh;
            text-align: center;
            -webkit-animation: rotateReverse 10s infinite linear;
            animation: rotateReverse 10s infinite linear;
            z-index: 999;
        }

        .g-number-rotate {
            -webkit-transform: rotateX(10deg) rotateZ(0);
            transform: rotateX(10deg) rotateZ(0);
            -webkit-animation: rotate 10s infinite linear;
            animation: rotate 10s infinite linear;
        }

        .preserve {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }

        .g-number {
            position: relative;
            width: 3vw;
            height: 12vw;
            display: inline-block;
            margin: 3vw 3vw 0 0;
        }

        .g-number .g-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 3vw;
            height: 2px;
            background: #181919;
        }

        .g-number .g-line:nth-child(1) {
            -webkit-transform: translateY(-0.2vw);
            transform: translateY(-0.2vw);
        }

        .g-number .g-line:nth-child(2) {
            top: 3.2vw;
        }

        .g-number .g-line:nth-child(3) {
            -webkit-transform: rotate(180deg) translateY(-0.2vw);
            transform: rotate(180deg) translateY(-0.2vw);
            top: 6.4vw;
        }

        .g-number .g-line:nth-child(4) {
            -webkit-transform: rotate(90deg) translateY(0.2vw);
            transform: rotate(90deg) translateY(0.2vw);
            -webkit-transform-origin: 0 center;
            transform-origin: 0 center;
        }

        .g-number .g-line:nth-child(5) {
            -webkit-transform: rotate(-90deg) translateY(0.2vw);
            transform: rotate(-90deg) translateY(0.2vw);
            -webkit-transform-origin: 100% center;
            transform-origin: 100% center;
        }

        .g-number .g-line:nth-child(6) {
            top: 3.4vw;
            -webkit-transform: rotate(90deg) translateY(0.2vw);
            transform: rotate(90deg) translateY(0.2vw);
            -webkit-transform-origin: 0 center;
            transform-origin: 0 center;
        }

        .g-number .g-line:nth-child(7) {
            top: 3.4vw;
            -webkit-transform: rotate(-90deg) translateY(0.2vw);
            transform: rotate(-90deg) translateY(0.2vw);
            -webkit-transform-origin: 100% center;
            transform-origin: 100% center;
        }

        .g-number .g-line::before,
        .g-number .g-line::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: #34eabc;
            box-shadow: 0 0 1vw #0bfdfd, inset 0 0 0.125vmin #0bfdfd;
        }

        .g-number .g-line::before {
            left: 0;
            right: 50%;
            transition: all 0.5s ease-in;
        }

        .g-number .g-line::after {
            left: 50%;
            right: 0;
            transition: all 0.5s ease-out;
        }

        .g-number .translate::before,
        .g-number .translate::after {
            -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
        }

        .g-comma-top {
            position: relative;
            top: -6.4vw;
            left: 2vw;
            display: inline-block;
            width: 1vw;
            height: 1vw;
            background: #181919;
            margin: 3vw 3vw 0 -0.8vw;
        }

        .g-comma-top::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #34eabc;
            -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
        }

        .g-comma-top::after {
            content: "";
            position: absolute;
            bottom: -0.8vw;
            right: 0.3vw;
            -webkit-transform: translateZ(50px) rotate(40deg);
            transform: translateZ(50px) rotate(40deg);
        }

        .g-comma-bottom {
            position: relative;
            top: -9.4vw;
            left: -1.6vw;
            display: inline-block;
            width: 1vw;
            height: 1vw;
            background: #181919;
            margin: 3vw 3vw 0 -0.8vw;
        }

        .g-comma-bottom::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #34eabc;
            -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
        }

        .g-comma-bottom::after {
            content: "";
            position: absolute;
            bottom: -0.8vw;
            right: 0.3vw;
            -webkit-transform: translateZ(50px) rotate(40deg);
            transform: translateZ(50px) rotate(40deg);
        }

        .g-number[data-digit="1"] .g-line:nth-child(1)::before,
        .g-number[data-digit="1"] .g-line:nth-child(1)::after,
        .g-number[data-digit="1"] .g-line:nth-child(2)::before,
        .g-number[data-digit="1"] .g-line:nth-child(2)::after,
        .g-number[data-digit="1"] .g-line:nth-child(3)::before,
        .g-number[data-digit="1"] .g-line:nth-child(3)::after,
        .g-number[data-digit="1"] .g-line:nth-child(4)::before,
        .g-number[data-digit="1"] .g-line:nth-child(4)::after,
        .g-number[data-digit="1"] .g-line:nth-child(6)::before,
        .g-number[data-digit="1"] .g-line:nth-child(6)::after,
        .g-number[data-digit="2"] .g-line:nth-child(4)::before,
        .g-number[data-digit="2"] .g-line:nth-child(4)::after,
        .g-number[data-digit="2"] .g-line:nth-child(7)::before,
        .g-number[data-digit="2"] .g-line:nth-child(7)::after,
        .g-number[data-digit="3"] .g-line:nth-child(4)::before,
        .g-number[data-digit="3"] .g-line:nth-child(4)::after,
        .g-number[data-digit="3"] .g-line:nth-child(6)::before,
        .g-number[data-digit="3"] .g-line:nth-child(6)::after,
        .g-number[data-digit="4"] .g-line:nth-child(1)::before,
        .g-number[data-digit="4"] .g-line:nth-child(1)::after,
        .g-number[data-digit="4"] .g-line:nth-child(3)::before,
        .g-number[data-digit="4"] .g-line:nth-child(3)::after,
        .g-number[data-digit="4"] .g-line:nth-child(6)::before,
        .g-number[data-digit="4"] .g-line:nth-child(6)::after,
        .g-number[data-digit="5"] .g-line:nth-child(5)::before,
        .g-number[data-digit="5"] .g-line:nth-child(5)::after,
        .g-number[data-digit="5"] .g-line:nth-child(6)::before,
        .g-number[data-digit="5"] .g-line:nth-child(6)::after,
        .g-number[data-digit="6"] .g-line:nth-child(5)::before,
        .g-number[data-digit="6"] .g-line:nth-child(5)::after,
        .g-number[data-digit="7"] .g-line:nth-child(2)::before,
        .g-number[data-digit="7"] .g-line:nth-child(2)::after,
        .g-number[data-digit="7"] .g-line:nth-child(3)::before,
        .g-number[data-digit="7"] .g-line:nth-child(3)::after,
        .g-number[data-digit="7"] .g-line:nth-child(4)::before,
        .g-number[data-digit="7"] .g-line:nth-child(4)::after,
        .g-number[data-digit="7"] .g-line:nth-child(6)::before,
        .g-number[data-digit="7"] .g-line:nth-child(6)::after,
        .g-number[data-digit="9"] .g-line:nth-child(6)::before,
        .g-number[data-digit="9"] .g-line:nth-child(6)::after,
        .g-number[data-digit="0"] .g-line:nth-child(2)::before,
        .g-number[data-digit="0"] .g-line:nth-child(2)::after {
            -webkit-transform: translateZ(25px);
            transform: translateZ(25px);
            background: #3c4444;
            box-shadow: 0 0 1vw #425454;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            50% {
                -webkit-transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);
                transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);
            }

            100% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
            }
        }

        @keyframes rotate {
            0% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            50% {
                -webkit-transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);
                transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);
            }

            100% {
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
            }
        }

        @-webkit-keyframes rotateReverse {
            0% {
                -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }

            100% {
                -webkit-transform: rotateZ(-360deg);
                transform: rotateZ(-360deg);
            }
        }

        @keyframes rotateReverse {
            0% {
                -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }

            100% {
                -webkit-transform: rotateZ(-360deg);
                transform: rotateZ(-360deg);
            }
        }
    </style>
</head>

<body>

    <div class="g-number-container vision preserve">
        <div class="g-number-rotate preserve">
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
            <div class="g-comma-top preserve"></div>
            <div class="g-comma-bottom preserve"></div>
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
            <div class="g-comma-top preserve"></div>
            <div class="g-comma-bottom preserve"></div>
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
            <div class="g-number preserve" data-digit="0">
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
                <div class="g-line preserve translate"></div>
            </div>
        </div>
    </div>
</body>

</html>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function () {
        let numbers = $('.g-number');
        setInterval(() => {
            let timeDate = [new Date().getHours(), new Date().getMinutes() , new Date().getSeconds()]
            timeDate  =  timeDate.map(v => {
                if (v.toString().length != 2) {
                    v = "0" + v.toString()
                }
                return v
            })
            timeDate = timeDate.join("").split("")
            $('.g-number:nth-of-type(1)').attr('data-digit', timeDate[0])
            $('.g-number:nth-of-type(2)').attr('data-digit', timeDate[1])
            $('.g-number:nth-of-type(5)').attr('data-digit', timeDate[2])
            $('.g-number:nth-of-type(6)').attr('data-digit', timeDate[3])
            $('.g-number:nth-of-type(9)').attr('data-digit', timeDate[4])
            $('.g-number:nth-of-type(10)').attr('data-digit', timeDate[5])
        }, 1000)
    });
</script>